<script setup lang="ts">
import {UserOutlined} from "@ant-design/icons-vue";
import {getCurrentInstance} from "vue";
import SuperOptimization from "~/contentScripts/views/wxt/SuperOptimization.vue";
import {isLogin} from "~/logic";
import user from "~/contentScripts/views/tao/list/components/user.vue";
const context = getCurrentInstance()?.appContext;
const __option = context?.provides.option;
const title = context?.provides.title || '超级优化';
const key = context?.provides.active || 'keywordPromotion';
const type = context?.provides.type || 'plan';
const loginVisible = ref(false);
const openSuperOptimization = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    visibleSuperOptimization.value = true;
  }
}
const visibleSuperOptimization = ref(false);
</script>

<template>
  <div class="showBox">
    <a-col class="icon">
      <a href="http://www.xingcha365.com/" target="_blank">
        <img src="../../../assets/icon-trans.png">
      </a>
    </a-col>
    <a-col class="content" flex="1">
      <a-row type="flex" style="height: 25px;overflow: hidden;">
        <a-col class="item">
          <a @click="openSuperOptimization">
            {{ title }}
          </a>
        </a-col>
        <!--            <a-col class="item">-->
        <!--&lt;!&ndash;              @click="openBatchAddingPlans"&ndash;&gt;-->
        <!--              <a type="link" class="disabled">-->
        <!--                批量创建计划-->
        <!--              </a>-->
        <!--            </a-col>-->
        <a-col class="item">
          <user type="ghost" :style="{
            marginRight:0,
            marginLeft:0,
            padding:0,
          }"
          >
            <UserOutlined class="a"/>
          </user>
        </a-col>
      </a-row>
    </a-col>
  </div>
  <user-login-modal v-model:login-visible="loginVisible" @close="()=>loginVisible=false"/>
  <SuperOptimization :active="key" :type="type" v-model:visible="visibleSuperOptimization"/>
</template>

<style lang="less" scoped>
.showBox {
  display: flex;
  margin-top: 18px;
}

.icon {
  width: 26px;

  img {
    max-width: 100%;
    user-select: none;
    // 禁止拖拽图片
    pointer-events: none;
  }
}

.content {
  border: 1px solid #1677ff;
  background: rgba(64, 158, 255, .15);
  border-radius: 5px;
  margin-left: 10px;

  user-select: none;

  .item {
    font-size: 12px;
    height: 25px;
    overflow: hidden;
    user-select: none;

    a, .a {
      height: 100%;
      user-select: none;
      display: flex;
      align-items: center;
      padding: 2px 5px;
      border-left: 2px solid #00000000;
      border-right: 2px solid #00000000;
      border-radius: 3px;
      color: #1677ff;

      &:hover {
        background: #1677ff;
        color: #fff;
      }

      &.disabled {
        color: #999;
        cursor: not-allowed;

        &:hover {
          background: #fff;
          color: #999;
        }
      }
    }
  }

  .item:not(:last-child) {
    border-right: 1px solid #1677ff;
  }
}
</style>
